<template>
	<div class="Main margin_auto zl_list_bg">
		<div class="zl_header">
			<zl_header class="zl_header_video"></zl_header>
		</div>
		<div style="height: 30px"></div>

		<div class="columns_list_content">
			<div class="zl_right_header">
				<div
					class="zl_right_header_item pointer"
					@click="rightListClick(0)"
					:class="{
						zl_right_header_item_active: right_header_current_item == 0,
					}"
				>
					人气之王
				</div>
				<div
					class="zl_right_header_item pointer"
					@click="rightListClick(1)"
					:class="{
						zl_right_header_item_active: right_header_current_item == 1,
					}"
				>
					笔耕不辍
				</div>
				<div
					class="zl_right_header_item pointer"
					@click="rightListClick(2)"
					:class="{
						zl_right_header_item_active: right_header_current_item == 2,
					}"
				>
					初来乍到
				</div>
			</div>
			<div style="height: 30px"></div>
			<div class="columns_list_content_box" v-if="authorList.length > 0">
				<div
					class="columns_list_content_item"
					v-for="(item, index) in authorList"
					:key="index"
				>
					<div class="columns_list_content_item_user">
						<div
							class="columns_list_content_item_user_avatar pointer"
							@click="openAuthorPage(item.author_id)"
						>
							<img
								v-if="
									item.author_avatar_img != '' && item.author_avatar_img != null
								"
								:src="item.author_avatar_img"
								:title="item.author_name"
							/>
							<img
								src="https://res.metaera.hk/resources/user_header.png"
								alt=""
								v-else
							/>
						</div>
						<div class="columns_list_content_item_user_content">
							<div class="columns_list_content_item_user_top">
								<div
									class="columns_list_content_item_user_name pointer ellipsis_1"
									@click="openAuthorPage(item.author_id)"
								>
									{{ item.author_name }}
								</div>
								<div
									class="columns_list_content_item_user_btn columns_list_content_item_user_btn_follow pointer"
									v-if="item.author_is_status == 1"
									@click="
										followAuthorFun(
											item.author_id,
											item.author_is_status == 1 ? 0 : 1
										)
									"
								>
									{{ item.author_is_status == 1 ? "已关注" : "关注" }}
								</div>

								<div
									class="columns_list_content_item_user_btn columns_list_content_item_user_btn_no pointer"
									v-else
									@click="
										followAuthorFun(
											item.author_id,
											item.author_is_status == 1 ? 0 : 1
										)
									"
								>
									{{ item.author_is_status == 1 ? "已关注" : "关注" }}
								</div>
							</div>
							<div
								class="columns_list_content_item_user_desc ellipsis_multiple"
							>
								{{ item.author_desc ? item.author_desc : "暂无简介" }}
							</div>
						</div>
					</div>
					<div class="columns_list_content_item_num">
						<div
							class="columns_list_content_item_num_item columns_list_content_item_num_item1"
						>
							<div class="columns_list_content_item_num_item_count hovercolor">
								{{ item.article_count }}
							</div>
							<div class="columns_list_content_item_num_item_title">
								文章数
							</div>
						</div>
						<div
							class="columns_list_content_item_num_item columns_list_content_item_num_item2"
						>
							<div class="columns_list_content_item_num_item_count">
								{{ item.total_visits ? item.total_visits : 0 }}
							</div>
							<div class="columns_list_content_item_num_item_title">
								总流量数
							</div>
						</div>
						<div
							class="columns_list_content_item_num_item columns_list_content_item_num_item3"
						>
							<div class="columns_list_content_item_num_item_count">
								{{ item.follower_count }}
							</div>
							<div class="columns_list_content_item_num_item_title">
								粉丝数
							</div>
						</div>
					</div>
					<div
						class="columns_list_content_item_desc pointer"
						@click="openContentPage(item.latest_article_id)"
					>
						<div class="columns_list_content_item_desc_title"> 最新文章 </div>
						<div
							class="columns_list_content_item_desc_content ellipsis_multiple"
						>
							{{
								item.latest_article_title
									? item.latest_article_title
									: "暂无最新文章"
							}}
						</div>
					</div>
				</div>

				<div style="padding-bottom: 50px"> </div>
			</div>
		</div>
	</div>
</template>

<script>
import { getAuthorList } from "@/api/home";
import zl_header from "./zl_header.vue";
import { myMixin } from "@/utils/mixin.js";
export default {
	mixins: [myMixin],
	name: "",
	components: {
		zl_header,
	},
	data() {
		return {
			authorList: [],
			page: 1,
			size: 25,
			total: "",
			right_header_current_item: 0,
		};
	},
	methods: {
		gettoUserInfo(id) {
			this.rightListClick(this.right_header_current_item);
		},
		openAuthorPage(id) {
			const route = this.$router.resolve({
				name: "/home_wz",
				params: { id: id },
			});
			window.open(route.href, "_blank");
		},

		openContentPage(id) {
			const route = this.$router.resolve({
				name: "/gw_detail",
				params: { id: id },
			});
			window.open(route.href, "_blank");
		},
		rightListClick(index) {
			this.right_header_current_item = index;
			getAuthorList({
				type: index + 1,
				dateType: 2,
			})
				.then((res) => {
					if (res.code == 200) {
						this.authorList = res.data.list;
						this.total = res.data.total;
					}
				})
				.catch((error) => {
					// this.$message.error(error.message);
				});
		},
	},
	created() {
		this.rightListClick(0);
	},
};
</script>

<style scoped></style>
<style scoped>
.zl_list_bg {
	background: rgba(0, 0, 0, 0) !important;
}
</style>

<style scoped>
.columns_list_content {
	/* width: 80%; */
	max-width: 1200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 auto; /* 水平居中 */
}
.zl_right_header {
	margin-left: 0px;
	width: 400px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-right: auto; /* 关键点：靠右对齐 */
}
@media screen and (max-width: 900px) {
	.zl_right_header {
		margin-left: 20px;
	}
}
.zl_right_header_item {
	height: 34px;
	width: 110px;
	text-align: center;
	align-items: center;
	display: flex;
	align-content: center;
	justify-content: center;
	font-size: 18px;
	font-weight: normal;
	line-height: 24px;
	letter-spacing: normal;
	color: rgba(255, 255, 255, 0.8);
	border-radius: 17px;
}

.zl_right_header_item_active {
	background: linear-gradient(
		45deg,
		#9945ff,
		#8752f3,
		#5497d5,
		#43b4ca,
		#28e0b9,
		#19fb9b
	) !important;
}

.zl_right_list {
	padding-top: 20px;
}
</style>
<style scoped>
.columns_list_content_box {
	display: flex;
	flex-wrap: wrap;
	gap: 12px; /* 间距 */
}
.columns_list_content_item {
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 22px;
	padding-bottom: 22px;
	flex: 1 1 calc(33.333% - 10px); /* 均分宽度并减去 gap */
	min-width: 0; /* 防止内容挤压 */
	box-sizing: border-box; /* 包含 padding 和 border */
	border-radius: 22px;
	background: linear-gradient(
			45deg,
			#9945ff -8%,
			rgba(135, 82, 243, 0) 19%,
			rgba(84, 151, 213, 0) 50%,
			rgba(67, 180, 202, 0) 68%,
			rgba(40, 224, 185, 0) 86%,
			#19fb9b 109%
		),
		#050505;
	/* border: 1px solid #ffffff; */
}

@media screen and (max-width: 900px) {
	.columns_list_content_item {
		margin-left: 20px;
		margin-right: 20px;
		flex: 1 1 calc(100% - 10px); /* 均分宽度并减去 gap */
	}
}
.columns_list_content_item:hover {
	border: 1px solid #ffffff;
	box-shadow: 0px 4px 20px 0px #61e9ff;
}

.columns_list_content_item_user {
	display: flex;
}

.columns_list_content_item_user_avatar {
	width: 80px;
	height: 80px;
	overflow: hidden;
	position: relative;
	border-radius: 40px;
	flex-shrink: 0; /* 禁止压缩 */
}

.columns_list_content_item_user_avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 40px; /* 和父元素一致 */
}

.columns_list_content_item_user_avatar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 40px; /* 和父元素一致 */
	padding: 1px; /* 边框宽度 */
	background: linear-gradient(
		180deg,
		rgba(153, 69, 255, 0.8) -1%,
		rgba(135, 82, 243, 0.8) 22%,
		rgba(84, 151, 213, 0.8) 44%,
		rgba(67, 180, 202, 0.8) 55%,
		rgba(40, 224, 185, 0.8) 69%,
		rgba(25, 251, 155, 0.8) 96%
	);
	-webkit-mask: linear-gradient(#fff, #fff) content-box,
		linear-gradient(#fff, #fff);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none; /* 避免遮挡点击事件 */
}

.columns_list_content_item_user_content {
	width: 100%;
}
.columns_list_content_item_user_top {
	margin-left: 10px;
	display: flex;
	justify-content: space-between;
}
.columns_list_content_item_user_name {
	font-size: 26px;
	font-weight: bold;
	line-height: 1.2;
	letter-spacing: normal;
	color: #ffffff;
}

.columns_list_content_item_user_btn {
	margin-left: 10px;
	flex-shrink: 0; /* 禁止压缩 */
	box-sizing: border-box;
	font-size: 14px;
	font-weight: 500;
	line-height: 27px;
	text-align: center;
	letter-spacing: normal;
	color: #ffffff;
	padding-left: 20px;
	padding-right: 20px;
	height: 27px;
	border-radius: 22px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.columns_list_content_item_user_btn_follow {
	background-image: url("https://res.metaera.hk/resources/assets/images/zl/zl_follow_btn_3.svg");
}
.columns_list_content_item_user_btn_no {
	background-image: url("https://res.metaera.hk/resources/assets/images/zl/zl_follow_btn_1.svg");
}

.columns_list_content_item_user_btn_no:hover {
	background-image: url("https://res.metaera.hk/resources/assets/images/zl/zl_follow_btn_2.svg");

	border: 0px solid #ffffff;
}

.columns_list_content_item_user_desc {
	margin-left: 10px;
	margin-top: 10px;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
	text-transform: capitalize;
	letter-spacing: normal;
	color: #d8d8d8;
}

.columns_list_content_item_num {
	display: flex;
	margin-top: 23px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px; /* 间距 */
}

.columns_list_content_item_num_item {
	flex: 1 1 calc(33.333% - 10px); /* 均分宽度并减去 gap */
	min-width: 0; /* 防止内容挤压 */
	box-sizing: border-box; /* 包含 padding 和 border */
	/* border: 1px solid #ffffff; */
	border-radius: 8px;
	text-align: center;
	align-items: center;
	align-content: center;
	aspect-ratio: 236/136;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.columns_list_content_item_num_item:hover
	.columns_list_content_item_num_item_count,
.columns_list_content_item_num_item:hover
	.columns_list_content_item_num_item_title {
	background: linear-gradient(
		45deg,
		#9945ff,
		#8752f3,
		#5497d5,
		#43b4ca,
		#28e0b9,
		#19fb9b
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.columns_list_content_item_num_item1 {
	background-image: url("https://res.metaera.hk/resources/assets/images/zl/文章数选中@3x.png");
}
.columns_list_content_item_num_item1:hover {
	background-image: url("https://res.metaera.hk/resources/assets/images/zl/文章数选中@3x.png");
}
.columns_list_content_item_num_item2 {
	background-image: url("https://res.metaera.hk/resources/assets/images/zl/否@3x.png");
}

.columns_list_content_item_num_item2:hover {
	background-image: url("https://res.metaera.hk/resources/assets/images/zl/否@3x.png");
}
.columns_list_content_item_num_item3 {
	background-image: url("https://res.metaera.hk/resources/assets/images/zl/容器 52@3x.png");
}
.columns_list_content_item_num_item3:hover {
	background-image: url("https://res.metaera.hk/resources/assets/images/zl/容器 52@3x.png");
}

.columns_list_content_item_num_item_count {
	font-size: 18px;
	font-weight: 500;
	line-height: 27px;
	text-align: center;
	letter-spacing: normal;
	color: #ffffff;
}
.columns_list_content_item_num_item_title {
	font-size: 14px;
	font-weight: 500;
	line-height: 27px;
	letter-spacing: normal;
	color: #ffffff;
}
.columns_list_content_item_desc {
	padding-left: 16px;
	padding-right: 16px;
	margin-top: 20px;
	border-radius: 10px;
	/* border: 1px solid #ffffff; */
}

.columns_list_content_item_desc_title {
	margin-top: 18px;
	font-size: 12px;
	font-weight: 500;
	line-height: 27px;
	letter-spacing: normal;
	/* 描边色/描边浅色 */
	color: #d8d8d8;
}
.columns_list_content_item_desc_content {
	margin-bottom: 18px;
	font-size: 18px;
	font-weight: normal;
	line-height: 27px;
	letter-spacing: normal;
	color: #ffffff;
}
</style>
